<template>
  <div :style="{width}">
    <div v-show="!shirnk" class="LoadSheetBox">
      <div class="title">
        <h4>字段</h4>
        <div @click="setShirnk(true)">
          <img class="shirnk-image"  src="@/assets/image/common/右拉.png" />
        </div>
      </div>

      <div class="content">
        <CollapseList :sheetList="sheetList"></CollapseList>
      </div>
    </div>

    <div v-show="shirnk" class="shirnk">
      <div @click="setShirnk(false)">
        <img style="width:25px;padding:5px;" src="@/assets/image/common/左拉.png" />
        <h4 style="padding:10px;">字段</h4>
      </div>
    </div>
  </div>
</template>

<script>
import CollapseList from "@/components/common/CollapseList.vue";

export default {
  components: {
    CollapseList,
  },
  props:["canvasSizeStatus"],
  computed: {
    getLoadSheet() {
      return this.$store.state.loadSheet.loadSheetList;
    },
  },
  watch: {
    getLoadSheet: {
      handler(newVal) {
        this.sheetList = newVal;
      },
      deep: true,
    },
  },
  data() {
    return {
      activeName: "1",
      sheetList: [],
      shirnk: false,
      width: "12%",
    };
  },
  mounted() {
    if (!this.getLoadSheet.length) {
      this.$axios.post("/getLoad").then((res) => {
        if (res.code == 200) {
          this.$store.commit("addLoadSheetList", res.data.data);
          this.sheetList = this.getLoadSheet;
        }
      });
    } else {
      this.sheetList = this.getLoadSheet;
    }
  },
  methods:{
    setShirnk(val){
      this.shirnk = val

      if(val) this.width = "3%"

      else this.width = "12%"

      this.$emit('set-canvas-size-status',this.canvasSizeStatus+1)
    }
  }
};
</script>

<style scoped>
.LoadSheetBox {
  /* width: 25%; */
  background-color: rgb(33, 33, 33);
  color: white;
  border: 1px solid black;

  user-select: none;
}

.LoadSheetBox .title {
  text-align: left;
  border-bottom: 1px solid black;
  background-color: rgb(33, 33, 33);
  padding: 12px;

  display: flex;
  justify-content: space-between;
}

.title h4 {
  margin: 0;
}

.LoadSheetBox .LoadSheets {
  background-color: rgb(56, 56, 56);
}

.LoadSheetsColumn {
  background-color: rgb(56, 56, 56);
  border-bottom: 1px solid black;
  color: white;
}

.content {
  max-height: 86vh;
  min-height: 86vh;
  overflow-y: auto;

  font-size: 14px;
}

.shirnk{
  color:white;

  height:100%;
  background-color: rgb(33, 33, 33);
  border-left:1px solid black;
}

.shirnk-image{
  width:15px;
}
</style>